<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
        <el-form :model="addApprovalAppointmentRecordForm" ref="addApprovalAppointmentRecordRef"
            :rules="addApprovalAppointmentRecordrules">
            <!-- <el-form-item label="预约ID" :label-width="formLabelWidth" prop="appointmentId"
                v-if="addApprovalAppointmentRecordForm.id">
                <el-input v-model="addApprovalAppointmentRecordForm.appointmentId" autocomplete="off" ref="name"
                    placeholder="请填写预约ID"></el-input>
            </el-form-item>
            <el-form-item label="审批人人员编号" :label-width="formLabelWidth" prop="teacherNumber">
                <el-input v-model="addApprovalAppointmentRecordForm.teacherNumber" autocomplete="off" ref="name"
                    placeholder="请填写审批人人员编号"></el-input>
            </el-form-item>
            <el-form-item label="审批人人员姓名" :label-width="formLabelWidth" prop="teacherName">
                <el-input v-model="addApprovalAppointmentRecordForm.teacherName" autocomplete="off" ref="name"
                    placeholder="请填写审批人人员姓名"></el-input>
            </el-form-item>
            <el-form-item label="审批状态" :label-width="formLabelWidth" prop="status">
                <el-input v-model="addApprovalAppointmentRecordForm.status" autocomplete="off" ref="name"
                    placeholder="请填写审批状态"></el-input>
            </el-form-item>
            <el-form-item label="审批级别" :label-width="formLabelWidth" prop="level"
                v-if="addApprovalAppointmentRecordForm.id">
                <el-input v-model="addApprovalAppointmentRecordForm.level" autocomplete="off" ref="name"
                    placeholder="请填写审批级别"></el-input>
            </el-form-item>
            <el-form-item label="审批时间" :label-width="formLabelWidth" prop="approvalTime"
                v-if="addApprovalAppointmentRecordForm.id">
                <el-input v-model="addApprovalAppointmentRecordForm.approvalTime" autocomplete="off" ref="name"
                    placeholder="请填写审批时间"></el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
                <el-input v-model="addApprovalAppointmentRecordForm.remark" autocomplete="off" ref="name"
                    placeholder="请填写备注"></el-input>
            </el-form-item> -->
            <el-form-item label="实验主题" :label-width="formLabelWidth" prop="remark">
                <!-- <el-input v-model="addApprovalAppointmentRecordForm.remark" autocomplete="off" ref="name"
                    placeholder="请填写备注"></el-input> -->
                <textarea name="" id="" cols="110" rows="5" style="outline: none;"
                    v-model="addApprovalAppointmentRecordForm.title"></textarea>
            </el-form-item>
            <el-form-item label="实验器材" :label-width="formLabelWidth" prop="remark">
                <!-- <el-input v-model="addApprovalAppointmentRecordForm.remark" autocomplete="off" ref="name"
                    placeholder="请填写备注"></el-input> -->
                <textarea name="" id="" cols="110" rows="5" style="outline: none;"
                    v-model="addApprovalAppointmentRecordForm.description"></textarea>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel()">取消</el-button>
                <el-button type="primary" @click="save()">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";

export default {
    name: "AddApprovalAppointmentRecord",
    components: { ElForm, ElMessage },
    data() {
        return {
            dialogFormVisible: ref(false),
            formLabelWidth: "120px",
            title: "",
            personnelType: "",
            addApprovalAppointmentRecordForm: {
                // appointmentId: "",
                // teacherNumber: "",
                // teacherName: "",
                // status: "",
                // level: "",
                // approvalTime: "",
                // remark: "",
                id: '',
                description: '',
                title: '',
            },
            // 校验规则
            addApprovalAppointmentRecordrules: {
                teacherNumber: vxRule(true, null, "blur"),
                teacherName: vxRule(true, null, "blur"),
                status: vxRule(true, null, "blur"),
                remark: vxRule(true, null, "blur"),
            },
        };
    },
    methods: {
        closeDialog() {
            this.clear();
        },
        cancel() {
            this.dialogFormVisible = false;
            this.clear();
        },
        getApprovalAppointmentRecordById(id) {
            httpService("/javaApi/approvalAppointment/queryById", { id: id }, "get").then(
                (data) => {
                    console.log(data);
                    this.addApprovalAppointmentRecordForm = data.approvalAppointment;
                }
            );
        },

        clear() {
            this.dialogFormVisible = false;
            //清空form
            this.addApprovalAppointmentRecordForm.description = "";
            this.addApprovalAppointmentRecordForm.title = "";
        },
        save() {
            if (this.addApprovalAppointmentRecordForm.title == '') {
                ElMessage.error("请填写实验主题");
            } else if (this.addApprovalAppointmentRecordForm.description == '') {
                ElMessage.error("请填写实验器材");
            } else {
                let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
                params.append("description", this.addApprovalAppointmentRecordForm.description);
                params.append("title", this.addApprovalAppointmentRecordForm.title);
                if (this.addApprovalAppointmentRecordForm.id) {
                    params.append("id", this.addApprovalAppointmentRecordForm.id);
                    httpService("/javaApi/approvalAppointment/edit", params, "post").then(
                        (data) => {
                            if (data.code == 200) {
                                ElMessage.success("修改成功");
                                this.clear();
                                //刷新父组件的数据
                                this.$parent.getApprovalAppointmentRecordList();
                            } else {
                                ElMessage.error("修改失败");
                            }
                        }
                    );
                }
            }
            // this.$refs.addApprovalAppointmentRecordRef.validate((valid) => {
            //     if (valid) {
            //         let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
            //         params.append("description", this.addApprovalAppointmentRecordForm.description);
            //         params.append("title", this.addApprovalAppointmentRecordForm.title);
            //         if (this.addApprovalAppointmentRecordForm.id) {
            //             params.append("id", this.addApprovalAppointmentRecordForm.id);
            //             httpService("/api/approvalAppointmentRecord/edit", params, "post").then(
            //                 (data) => {
            //                     if (data.code == 200) {
            //                         ElMessage.success("修改成功");
            //                         this.clear();
            //                         //刷新父组件的数据
            //                         this.$parent.getApprovalAppointmentRecordList();
            //                     } else {
            //                         ElMessage.error("修改失败");
            //                     }
            //                 }
            //             );
            //         } else {
            //             httpService("/api/approvalAppointmentRecord/add", params, "post").then(
            //                 (data) => {
            //                     if (data.code == 200) {
            //                         ElMessage.success("添加成功");
            //                         this.clear();
            //                         //刷新父组件的数据
            //                         this.$parent.getApprovalAppointmentRecordList();
            //                     } else {
            //                         ElMessage.error("添加失败");
            //                     }
            //                 }
            //             );
            //         }
            //     } else {
            //         return false;
            //     }
            // });
        },
    },
};
</script>
<style></style>